<template>
  <div class="container">
    <scroll-view class="scroll_x" :scroll-x="true" scroll-with-animation>
      <view
        v-bind:class="[currentTab == 0 ? 'active' : '','tab_item' ]"
        data-current="0"
        @tap="switchNav"
      >
        <text>面部</text>
      </view>
      <view
        v-bind:class="[currentTab == 1 ? 'active' : '','tab_item' ]"
        data-current="1"
        @tap="switchNav"
      >
        <text>眼部</text>
      </view>
      <view
        v-bind:class="[currentTab == 2 ? 'active' : '','tab_item' ]"
        data-current="2"
        @tap="switchNav"
      >
        <text>身体</text>
      </view>
      <view
        v-bind:class="[currentTab == 3 ? 'active' : '','tab_item' ]"
        data-current="3"
        @tap="switchNav"
      >
        <text>头发</text>
      </view>
    </scroll-view>
    <swiper
      class="swiper"
      :current="currentTab"
      @change="switchTab"
      duration="500"
      v-bind:style="{ height: winHeight + 'rpx' }"
    >
      <swiper-item>
        <div class="wrap_box" v-for="(v,i) in face" :key="i">
          <div class="title">
            <i class="shu"></i>
            <span>{{v.title}}</span>
          </div>
          <div class="body">
            <checkbox-group>
              <label
                class="checkbox flex"
                v-for="(k,i2) in v.data"
                :key="i2"
                @tap="change"
                :data-categoryid="k.name"
                data-type="1"
              >
                <checkbox :value="k.name" :checked="k.checked" color="#f44444"/>
                {{k.value}}
              </label>
            </checkbox-group>
          </div>
        </div>
      </swiper-item>
      <swiper-item>
        <div class="wrap_box" v-for="(v,i) in eye" :key="i">
          <div class="title">
            <i class="shu"></i>
            <span>{{v.title}}</span>
          </div>
          <div class="body">
            <checkbox-group>
              <label
                class="checkbox flex"
                v-for="(k,i2) in v.data"
                :key="i2"
                @tap="change"
                :data-categoryid="k.name"
                data-type="2"
              >
                <checkbox :value="k.name" :checked="k.checked" color="#f44444"/>
                {{k.value}}
              </label>
            </checkbox-group>
          </div>
        </div>
      </swiper-item>
      <swiper-item>
        <div class="wrap_box" v-for="(v,i) in body" :key="i">
          <div class="title">
            <i class="shu"></i>
            <span>{{v.title}}</span>
          </div>
          <div class="body">
            <checkbox-group>
              <label
                class="checkbox flex"
                v-for="(k,i2) in v.data"
                :key="i2"
                @tap="change"
                :data-categoryid="k.name"
                data-type="3"
              >
                <checkbox :value="k.name" :checked="k.checked" color="#f44444"/>
                {{k.value}}
              </label>
            </checkbox-group>
          </div>
        </div>
      </swiper-item>
      <swiper-item>
        <div class="wrap_box" v-for="(v,i) in hair" :key="i">
          <div class="title">
            <i class="shu"></i>
            <span>{{v.title}}</span>
          </div>
          <div class="body">
            <checkbox-group>
              <label
                class="checkbox flex"
                v-for="(k,i2) in v.data"
                :key="i2"
                @tap="change"
                :data-categoryid="k.name"
                data-type="4"
              >
                <checkbox :value="k.name" :checked="k.checked" color="#f44444"/>
                {{k.value}}
              </label>
            </checkbox-group>
          </div>
        </div>
      </swiper-item>
    </swiper>
  </div>
</template>

<script>
import wx from 'wx'
import api from '@/utils/api'
import Toast from '@/utils/toast'
export default {
  data () {
    return {
      guest_id: '',
      orcode: '',
      currentTab: 0,
      winHeight: '',
      face: [],
      eye: [],
      body: [],
      hair: [],
      selected: [],
      flag: false
    }
  },
  components: {
  },
  async onLoad () {
    const that = this
    // 接收客户id
    that.guest_id = that.$route.query.id
    // 获取orcode
    that.orcode = wx.getStorageSync('userInfo').orcode
    // 初始化参数
    that.selected = []
    that.flag = false
    // 请求数据
    await Promise.all([
      that.get_info(1),
      that.get_info(2),
      that.get_info(3),
      that.get_info(4),
      that.getswiperheight()
    ])
  },
  methods: {
    async get_info (type) {
      const that = this
      const res = await api.getadmindiagnosedlist({
        orcode: that.orcode,
        guest_id: that.guest_id,
        type: type
      })
      if (res.code === '100') {
        let category = []
        let categoryid = []
        if (!that.flag) {
          res.selected.forEach((e, i) => {
            if (e.status === 1) {
              that.selected.push(e.categoryid)
            }
          })
          that.flag = true
        }
        res.data.forEach((e, i) => {
          if (!categoryid.includes(e.id)) {
            category.push({
              title: e.topname,
              data: [{
                name: e.listid,
                value: e.listname,
                checked: that.selected.includes(e.listid)
              }]
            })
            categoryid.push(e.id)
          } else {
            const k = categoryid.indexOf(e.id)
            category[k]['data'].push({
              name: e.listid,
              value: e.listname,
              checked: that.selected.includes(e.listid)
            })
          }
        })
        switch (type) {
          case 1:
            that.face = category
            break;
          case 2:
            that.eye = category
            break;
          case 3:
            that.body = category
            break;
          case 4:
            that.hair = category
            break;
          default:
            break;
        }
      }
    },
    async getswiperheight () {
      const that = this
      try {
        const res = wx.getSystemInfoSync()
        const clientHeight = res.windowHeight
        const clientWidth = res.windowWidth
        const rpxR = 750 / clientWidth
        const calc = clientHeight * rpxR - 84
        that.winHeight = calc
      } catch (e) {
        console.log(e)
      }
    },
    switchNav (e) {
      let that = this
      let cur = e.currentTarget.dataset.current
      if (that.currentTab !== cur) {
        that.currentTab = cur
      }
    },
    switchTab (e) {
      this.currentTab = e.target.current
    },
    async change (e) {
      const that = this
      const categoryid = e.currentTarget.dataset.categoryid
      const type = e.currentTarget.dataset.type
      const res = await api.postguestzengduan({
        guest_id: that.guest_id,
        categoryid: categoryid
      })
      if (res.code === '100') {
        Toast(res.msg, 'noicon')
        switch (type) {
          case '1':
            that.judge(that.face, categoryid)
            break;
          case '2':
            that.judge(that.eye, categoryid)
            break;
          case '3':
            that.judge(that.body, categoryid)
            break;
          case '4':
            that.judge(that.hair, categoryid)
            break;
          default:
            break;
        }
      } else {
        Toast(res.msg, 'noicon')
      }
    },
    judge (arr, id) {
      try {
        arr.forEach((e, i) => {
          e.data.forEach((k, j) => {
            if (id === k.name) {
              k.checked = !k.checked
              // 抛出异常退出循环
              throw new Error('exit')
            }
          })
        })
      } catch (error) {
        // 退出循环
        if (error.message === 'exit') {
          throw error
        }
      }
    }
  }
}
</script>

<style scoped>
.scroll_x {
  height: 84rpx;
  background-color: #ffffff;
}
.tab_item {
  display: inline-block;
  width: 25%;
  height: 100%;
  line-height: 84rpx;
  text-align: center;
  font-size: 28rpx;
  color: #333333;
}
.tab_item.active text {
  border-bottom: 4rpx solid #ff4444;
  color: #ff4444;
}
.tab_item text {
  display: inline-block;
  width: 50%;
  height: 100%;
  box-sizing: border-box;
}
.swiper {
  width: 100%;
  padding: 0 20rpx;
  box-sizing: border-box;
}
.wrap_box .title {
  padding-left: 34rpx;
  height: 76rpx;
  line-height: 76rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}
.wrap_box .body {
  font-size: 28rpx;
  color: rgba(102, 102, 102, 1);
  overflow: hidden;
}
.checkbox {
  width: 33.33%;
  height: 80rpx;
  float: left;
}
.shu {
  display: inline-block;
  width: 4rpx;
  height: 20rpx;
  background: rgba(255, 68, 68, 1);
  border-radius: 2rpx;
  margin-right: 12rpx;
}
</style>